<template>
    <el-card>
        <!-- 表单 -->
        <el-form :inline="true" :model="form" class="demo-form-inline" size="mini">
            <el-form-item label="订单号">
                <el-input v-model="form.orderNo" placeholder="订单号"></el-input>
            </el-form-item>
            <el-form-item label="收货人">
                <el-input v-model="form.consignee" placeholder="收货人"></el-input>
            </el-form-item>
            <el-form-item label="手机号">
                <el-input v-model="form.phone" placeholder="手机号"></el-input>
            </el-form-item>
            <el-form-item label="订单状态">
                <el-select v-model="form.orderState" placeholder="订单状态">
                    <el-option label="已受理" value="已受理"></el-option>
                    <el-option label="派送中" value="派送中"></el-option>
                    <el-option label="已完成" value="已完成"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="订单时间">
                <el-date-picker v-model="form.date" type="datetimerange" range-separator="至" start-placeholder="开始日期"
                    end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="query">查询</el-button>
            </el-form-item>
        </el-form>
        <!-- 表格 -->
        <el-table :data="tableData">
            <!-- 订单号 -->
            <el-table-column label="订单号" prop="orderNo"></el-table-column>
            <!-- 下单时间 -->
            <el-table-column label="下单时间" width="200">
                <template slot-scope="scope">
                    <span>{{ scope.row.orderTime | HMS }}</span>
                </template>
            </el-table-column>
            <!-- 手机号 -->
            <el-table-column label="手机号"  prop="phone"></el-table-column>
            <!-- 收货人 -->
            <el-table-column label="收货人"  prop="consignee"></el-table-column>
            <!-- 配送地址 -->
            <el-table-column label="配送地址"  prop="deliverAddress"></el-table-column>
            <!-- 送达时间 -->
            <el-table-column label="送达时间" >
                <template slot-scope="scope">
                    <span>{{ scope.row.deliveryTime | HMS }}</span>
                </template>
            </el-table-column>
            <!-- 用户备注 -->
            <el-table-column label="用户备注"  prop="remarks"></el-table-column>
            <!-- 订单金额 -->
            <el-table-column label="订单金额"  prop="orderAmount"></el-table-column>
            <!--订单状态 -->
            <el-table-column label="订单状态"  prop="orderState"></el-table-column>
            <!-- 操作 -->
            <el-table-column label="操作" >
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                    <el-button type="text" size="small">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination @size-change="sizeChange" @current-change="currentChange" :page-sizes="[3, 5, 8, 10]"
            :current-page="currentPage" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
    </el-card>
</template>
<script>
import { orderList } from '@/api/order.js'
export default {
    data () {
        return {
            tableData: [],
            form: {},
            currentPage: 1,//当前显示在第几页
            pageSize: 5,//每页显示多少条
            total: 0,//数据总条数
        }
    },
    methods: {
        //点击查询事件
        query () {
            this.form.date = JSON.stringify(this.form.date)
            this.getData()
        },
        //点击查看事件
        handleClick (row) {
            console.log(row);
        },

        //每一页显示条数,改变时触发
        sizeChange (val) {
            this.pageSize = val
            this.getData()
        },
        //当前页码改变时触发
        currentChange (val) {
            this.currentPage = val
            this.getData()
        },
        // 获取数据 渲染到页面
        async getData (q = {}) {
            if (this.form) {
                q = this.form
            } else {
                q = {}
            }
            q.currentPage = this.currentPage;
            q.pageSize = this.pageSize
            //读取订单数据
            let res = await orderList(q)
            this.tableData = res.data.data//渲染表格
            //分页
            this.total = res.data.total
        }
    },
    created () {
        this.getData()
    },

}
</script>